<section class="card manual">
    <div class="card-header">
        <filter-list request="request" callback="loadUsers(pageIndex)"></filter-list>
    </div>
    <div class="card-body">
        <table class="table table-sm table-hover" cellspacing="0" ng-init="loadUsers(0)">
            <thead class="thead-light">
                <tr>
                    <!-- <th scope="col" width="20%">
                                        Id
                                    </th> -->
                    <th scope="col" width="10%">
                        Username
                    </th>
                    <th scope="col" width="20%">
                        Roles
                    </th>
                    <th scope="col" width="10%">
                        Avatar
                    </th>
                    <th scope="col" width="10%">
                        Created Date
                    </th>

                    <th scope="col" style="width: 5%;" class="text-right">Actions</th>
                </tr>
            </thead>

            <tbody class="sortable">
                <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="user" sort-model-id="{{item.id}}">
                    <!-- <td>
                                        <small><span ng-bind="item.id"></span></small>
                                    </td> -->
                    <td>
                        <span ng-bind="item.username"></span>
                    </td>
                    <td>
                        <ul class="m-0">
                            <li ng-repeat="ur in item.userRoles">
                                <span ng-bind="ur.role.name"></span>
                            </li>
                        </ul>

                    </td>
                    <td>
                        <img class="rounded-circle" imageonload ng-src="{{item.avatarUrl}}" height="30">
                    </td>
                    <td>
                        <small>
                            {{item.createdDateTime | utcToLocal:'d.M.yyyy h:mm a'}}
                        </small>
                    </td>
                    <td>
                        <div class="btn-group btn-group-sm btn-group-sm float-right" role="group" aria-label="Actions">
                            <a href="/portal/user/details/{{item.id}}" class="btn btn-light">
                                <span class="fa fa-pen text-primary"></span>
                            </a>
                            <a ng-click="removeUser(item.id);" class="btn btn-light">
                                <span class="fas fa-times text-danger"></span>
                            </a>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="card-footer">
        <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems" ul-class="pagination justify-content-end" a-class="page-link" paging-action="loadUsers(page-1)" scroll-top="true">
    </paging></div>


</section>
